<template>
  <div class="props-table">
    <div v-for="(value, key) in finalProps" :key="key" class="prop-item">
      <span class="label" v-if="value?.text">{{ value.text }}</span>
      <div class="prop-component">
        <component
          v-if="value"
          :is="value?.component"
          :[value.valueProp]="value.value"
          v-bind="value?.extraProps"
          v-on="value.events"
        >
          <template v-if="value.options">
            <component
              v-if="value.subComponent"
              :is="value?.subComponent"
              v-for="(option, k) in value.options"
              :key="k"
              :value="option.value"
            >
              <!-- {{ option.text }} -->
              <RenderVnode :vNode="option.text" />
            </component>
          </template>
        </component>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { type PropType, computed, type VNode } from 'vue'
import { reduce } from 'lodash-es'
import { mapPropsToForms } from '@/mock/mapPropsToForms'
import type { TextComponentProps } from '@/types/defaultProps'
import type { PropsToForms } from '@/types/propsMap'
import RenderVnode from './RenderVnode'

interface FormProps {
  component: string
  subComponent?: string
  value: string
  extraProps?: { [key: string]: any }
  text?: string
  options?: { text: string | VNode; value: any }[]
  valueProp: string
  eventName: string
  events: { [key: string]: (e: any) => void }
}
const props = defineProps({
  props: Object as PropType<TextComponentProps>
})
const emit = defineEmits<{
  (e: 'change', componentData: any): void
  // (e: 'update', value: string): void
}>()
const finalProps = computed(() => {
  return reduce(
    props.props,
    (result, value, key) => {
      const newKey = key as keyof TextComponentProps // 断言
      const item = mapPropsToForms[newKey]
      if (item) {
        const { valueProp = 'value', eventName = 'change', initalTransform, afterTransform } = item
        const newItem: FormProps = {
          ...item,
          value: initalTransform ? initalTransform(value) : value,
          valueProp,
          eventName,
          events: {
            [eventName]: (e: any) => {
              console.log(e, '数据修改了吗')
              emit('change', {
                key,
                value: afterTransform ? afterTransform(e) : e
              })
            }
          }
        }
        // item.value = item.initalTransform ? item.initalTransform(value) : value
        // item.valueProp = item.valueProp ? item.valueProp : 'value'
        result[newKey] = newItem
      }
      return result
    },
    // {} as Required<PropsToForms>
    // {} as PropsToForms
    {} as { [key: string]: FormProps }
  )
})

console.log(finalProps, 'finalProps')
</script>

<style lang="scss" scoped>
.props-table {
  .prop-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    &.no-text {
      display: inline-block;
      margin: 0 10px 0 0;
    }
  }
  .label {
    width: 28%;
  }
  .prop-component {
    width: 70%;
  }
  #item-fontWeight {
    margin-left: 28%;
  }
  .component-a-select .ant-select {
    width: 150px;
  }
  .prop-component {
    &.component-shadow-picker,
    &.component-background-processer,
    &.component-image-processer {
      width: 100%;
    }
  }
}
</style>
